<template>
  <div>
    <template>
      <p>Rp</p>
  <el-table
    ref="multipleTable"
    :data="tablelist"
    border
    tooltip-effect="dark"
    height="300"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="序号"
      prop="id"
      width="60">
    </el-table-column>
    <el-table-column
      prop="groupnumber"
      label="组号"
      width="70">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="100">
    </el-table-column>
      <el-table-column
      prop="once"
      label="单次用量/口服"
      width="100">
    </el-table-column>
      <el-table-column
      prop="frequency"
      label="频度"
      width="100">
    </el-table-column>
      <el-table-column
      prop="date"
      label="天数"
      width="100">
    </el-table-column>
      <el-table-column
      prop="total"
      label="总量"
      width="100">
    <template slot-scope="scope">
      <button @click="scope.row.total--" :disabled="scope.row.total==1">-</button>
        <span style="margin: 0 10px">{{ scope.row.total }}</span>
        <button @click="scope.row.total++">+</button>
    </template>
    </el-table-column>
    <el-table-column
      prop="price"
      label="单价"
      width="80">
      <template slot-scope="scope">
        <span>{{ scope.row.price }}</span>
    </template>
    </el-table-column>
     
    <el-table-column
      prop="edit"
      label="编辑"
      width="70">
      <template slot-scope="scope">
        <button class="button" @click="delclick(scope.$index)">
        <span>删除</span>
      </button>
    </template>
    </el-table-column>
  </el-table>
  <div id="settel" style="
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 800px;
    height: 60px;
">
    <el-button type="success">附加费用</el-button>
    科室：
    <select>
      <option value="外科">外科</option>
      <option value="内科">内科</option>
      <option value="精神科">精神科</option>
      <option value="中西医结合科">中西医结合科</option>
    </select>
    主治医生：
    <select>
      <option value="老刘">老刘</option>
      <option value="老张">老张</option>
      <option value="王明阳">王明阳</option>
      <option value="Tom">Tom</option>
    </select>
    <span>此处方合计：<span style="color:red;">{{sum}}</span></span>&emsp;
    <span>共 <span style="color:red;">{{length}}</span> 个处方</span>
    <span>共计计：<span style="color:red;">{{sum}}</span></span>
  </div>
</template>
  </div>
</template>

<script>
export default {
  props:['tablelist'],
  data(){
    return{
      multipleTable:[],
      multipleSelection:[],
      arr:[]
    }
  },
methods: {
    handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log('666',this.multipleSelection);
        console.log('777',this.multipleTable);
      },
      delclick(val){
       this.tablelist.splice(val,1)
      }
},
computed:{
    sum(){
      var sum = 0
      this.multipleSelection.forEach(item =>{
         sum+= item.price * item.total
      })
      return sum
    },
    length(){
      return this.multipleSelection.length
    }
  },
}
</script>

<style lang="less" scoped>
p{
      font-size: 32px;
      color: #666ee8;
      margin-bottom: 10px;
}
.button{
  width: 45px;
  height: 30px;
  border:none;
  background-color: #F56C6C;
  color: #fff;
  span{
    text-align: center;
  }
  
}

</style>